<template>
    <div>
        <div style="width: 70%;background-color: white;margin: 30px auto;border-radius: 20px;">
            <div>
                <div
                    style="font-weight: bold; font-size: 18px;color: #000000FF;line-height: 80px;border-bottom: #cccccc 1px solid;">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;全部商品（{{ tableData.length }}）件
                    <el-select style="margin-left: 500px;" v-model="address" placeholder="请选择收货地址">
                        <el-option v-for="item in addressData" :key="item.id" :label="item.address" :value="item.id">
                        </el-option>
                    </el-select>
                    <span style="margin-left: 100px;">已选商品 <span style="color: red;">{{ computedPriceCount
                            }}￥</span></span>
                    <el-button @click="addOrder()"
                        style="float: right;margin-top: 20px;margin-right: 20px; height: 40px; width: 150px;font-size: 16px; border-radius: 20px;"
                        type="danger">下单</el-button>
                </div>
                <div>
                </div>
                <div style="margin: 20px 0; margin-left: 60px;margin-right: 60px;">
                    <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                        style="width: 100%;">
                        <!-- <el-table-column type="selection" width="55" /> -->
                        <el-table-column prop="goodImg" label="商品图片" width="200">
                            <template #default="scope">
                                <img style="width:60px;height:48px" :src="scope.row.goodImg" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="goodName" label="商品名称" width="200" align=center />
                        <el-table-column prop="sellerName" label="店铺" width="200" align=center />
                        <el-table-column label="商品价格" width="180" align=center>
                            <template #default="scope">
                                <span>{{ scope.row.goodPrice }}&nbsp;/&nbsp;{{ scope.row.goodUnit }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="选择数量" width="180" align=center>
                            <template #default="scope">
                                <el-button @click="descrement(scope.$index)" style="font-size: 27px;">-</el-button><span
                                    style="font-size: 15px;">&nbsp;&nbsp;&nbsp;{{ price[scope.$index]
                                    }}&nbsp;&nbsp;&nbsp;</span><el-button @click="inscrement(scope.$index)"
                                    style="font-size: 24px;">+</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="260" align=center>
                            <template #default="scope">
                                <el-popconfirm title="您确认要移除嘛?" @confirm="deleteShop(scope.row.id)"
                                    confirm-button-text="确认" cancel-button-text="取消" icon-color="red"
                                    style="height: 400px">
                                    <template #reference>
                                        <el-button type="danger" plain>移除购物车</el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>


                    <!-- 分页 -->
                    <div>
                        <el-pagination style="margin: 0px auto;height: 100px;" small background
                            @current-change="currentChange" :current-page="currentPage" :page-size="pageSize"
                            layout="prev, pager, next" :total="tableData.length" class="mt-4" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { selectOne, addOne, selectByUser, deleteOne, updateOne } from "../../api/index";

export default {
    data() {
        return {
            address: "",
            addressData: [],
            tableData: [],
            goodsData: [],
            typeData: {},
            sellerData: {},
            user: JSON.parse(JSON.stringify(this.$store.getters.getUser)),
            currentPage: 1,
            pageSize: 10,
            ids: [],
            price: [],
            priceCount: 0
        }
    },
    created() {
        this.load();
    },
    methods: {
        load() {
            selectByUser("shop", this.user.id).then(res => {
                if (res.code === 200) {
                    this.tableData = res.data;
                    for (let i = 0; i < this.tableData.length; i++) {
                        this.price[i] = 1;
                    }
                } else {
                    this.$message.error(res.message)
                }
            })
            selectByUser("address", this.user.id).then(res => {
                if (res.code === 200) {
                    this.addressData = res.data;
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        navGo(url) {
            this.$router.push(url);
        },
        currentChange(val) {
            this.currentPage = val;
        },
        deleteShop(id) {
            deleteOne("shop", id).then(res => {
                if (res.code === 200) {
                    this.$message.success(res.message);
                    this.load()
                } else {
                    this.$message.error(res.message);
                }
            })
        },

        handelSelectionChange(val) {
            this.ids = [];
            for (let i = 0; i < val.length; i++) {
                this.ids[i] = val[i].id;
            }
        },
        inscrement(id) {
            this.price[id]++;
        },
        descrement(id) {
            if (this.price[id] > 1) {
                this.price[id]--;
                console.log(1);
            }
        },
        addOrder() {
            if (this.address === "") {
                this.$message.error("请选择收货地址")
            } else {
                for (let i = 0; i < this.tableData.length; i++) {
                    console.log(this.tableData[i].id);
                    let data = JSON.parse(JSON.stringify(this.tableData[i]))
                    console.log(this.tableData[i].id);
                    data.addressId = this.address;
                    data.id = String(this.DateToStr(new Date())+i);
                    data.count = this.price[i];
                    console.log(this.tableData[i].id);
                    data.allPrice = this.price[i] * this.tableData[i].goodPrice;
                    addOne("order", data).then(res => {
                        console.log(this.tableData[i].id);
                        if (res.code === 200) {
                            deleteOne("shop", this.tableData[i].id).then(res => {
                                if (res.code === 200) {
                                    this.$message.success("下单成功");
                                } else {
                                    this.$message.error(res.message);
                                }
                            })
                        } else {
                            this.$message.error(res.message);
                        }
                    })
                }
            }
            // this.$router.go(0);
            setTimeout(()=>{
                this.load();
            },1000);
        },
        DateToStr(date) {
            var year = date.getFullYear();//年
            var month = date.getMonth();//月
            var day = date.getDate();//日
            var hours = date.getHours();//时
            var min = date.getMinutes();//分
            var second = date.getSeconds();//秒
            return year +
                ((month + 1) > 9 ? (month + 1) : "0" + (month + 1)) +
                (day > 9 ? day : ("0" + day)) +
                (hours > 9 ? hours : ("0" + hours)) +
                (min > 9 ? min : ("0" + min)) +
                (second > 9 ? second : ("0" + second));
        },
    },
    computed: {
        computedPriceCount() {
            let total = 0;
            for (let i = 0; i < this.tableData.length; i++) {
                total += this.tableData[i].goodPrice * this.price[i];
            }
            return total.toFixed(2);
        }
    }
}

</script>

<style>
body {
    background-color: #efebeb
}

a:hover {
    color: red;
}

a {
    text-decoration: none;
    color: #666666
}
</style>